<template>
	<view class="home" :style="{paddingTop: statusBarHeight+54+44+'px'}">
		<div class="navbar-wrap" :style="{height: statusBarHeight+54+'px'}">
			<!-- <HomeNavBar :nowCity="nowCity" @getAddressInfo="getAddressInfo"></HomeNavBar> -->
			<div class="img-bg">
				<image :src="www + 'imgs/home/home-top-bg.png'" mode="widthFix"></image>
			</div>
			<div class="statusBarHeight" :style="{height: statusBarHeight + 'px'}"></div>
			<div class="navbar" :style="{top: statusBarHeight + 'px'}">
				<!-- 当前城市 -->
				<div class="l-wrap" @click="pageJumps('/pagesSecond/make/selectCity')">
					<view class="location-icon">
						<image src="../../static/imgs/icons/location-icon.png" mode="widthFix"></image>
					</view>
					<view class="name">{{addressName}}</view>
				</div>
				<!-- #ifdef MP-WEIXIN -->
				<div class="c-tit">去嗨鸭</div>
				<!-- #endif -->
			</div>
		</div>

		<div v-if="isCheck" class="search-wrap" :style="{top: statusBarHeight+54+'px'}">
			<div class="img-bg" :style="{top: '-'+(statusBarHeight+44)+'px'}">
				<image :src="www + 'imgs/home/home-top-bg.png'" mode=""></image>
			</div>
			<HomeSearch @click.native="handleHomeSearch"></HomeSearch>
		</div>

		<div class="home-content">
			<div class="swiper-wrap">
				<div class="img-bg" :style="{top: '-'+(statusBarHeight+44+44)+'px'}">
					<image :src="www + 'imgs/home/home-top-bg.png'" mode=""></image>
				</div>
				<HomeSwiper :swiperList="bannerList"></HomeSwiper>
			</div>

			<view class="notice-wrap">
				<HomeNotice :list="noticeList" :scrollTime="scrollTime"></HomeNotice>
			</view>

			<!-- 选线路 -->
			<view class="choose_traffic_sticky-wrap">
				<view class="choose_traffic-wrap">

					<!-- 机场大巴 -->
					<view class="tfc-list" :style="{top: (statusBarHeight+44+44)+'px'}" v-if="isCheck">
						<view class="tfc-item" :class="{active: curTrafficinfo.alias === item.alias}"
							v-for="(item, index) in trafficList" :key="index" @click="handleChooseTraffic(item)">
							{{item.name}}
						</view>
					</view>
					<view class="" style="margin-top: 20px;" v-if="!isCheck">

					</view>
					<!-- <view class="tfc-line">
						<scroll-view scroll-x="true">
							<view class="tfc-line-item-li" :class="{activeline: trlineindex == index}"
								@click="sendid(item.id,index)" class="tfc-line-item" v-for="(item,index) in trline"
								:key='index'>
								{{item.name}}
							</view>
						</scroll-view>
					</view> -->
					<view class="tfc-line">
						<scroll-view scroll-x="true">
							<view class="tfc-item" :class="{activeline: trlineindex == index}"
								@click="sendid(items.id,index)" v-for="(items,index) in trline">
								<text>{{items.name}}</text>
							</view>
						</scroll-view>
					</view>
					<view class="tfc_detail-wrap">
						<!-- 单程 往返 -->
						<view class="travel_model-list">
							<view class="travel_model-item" :class="{active: curTravelModel.alias === it_model.alias}"
								v-for="(it_model, in_model) in travelModelList" :key="in_model"
								@click="handleChooseTravelModel(it_model)">{{it_model.name}}</view>
							<!-- <view @click="resetAdderss" class="reset-btn center_combo">
								<image class="reset-img" src="../../static/imgs/icons/reset.png" mode=""></image>
							</view> -->
						</view>

						<view class="address-wrap">
							<view class="address_from" @click="handleChooseTravelAddress('from')">
								<input class="ellispsis1" type="text" disabled :value="travelDetail.from"
									placeholder="请选择出发地" />
							</view>
							<view class="icon" @click="handleSwitchAddress">
								<image src="../../static/imgs/icons/switch-icon.png" mode=""></image>
							</view>
							<view class="address_to" @click="handleChooseTravelAddress('to')">
								<input class="ellispsis1" type="text" disabled :value="travelDetail.to"
									placeholder="请选择目的地" />
							</view>
						</view>

						<view class="date-wrap">
							<view class="date_go date" @click="handleChooseDate('go',choosedDateObj.go_full)">
								<view class="sts" v-if="curTravelModel.alias === 'toAndFor'">往</view>
								<text style="margin-right: 10rpx;">{{choosedDateObj.go || today}}</text>
								<!-- <text v-if="!choosedDateObj.go || nowDate===choosedDateObj.go">今天</text> -->
								<text
									v-if="(!choosedDateObj.go &&nowDate == today) || nowDate===choosedDateObj.go">今天</text>
								<text
									v-if="choosedDateObj.go &&　nowDate != today">{{getWeekByDate(choosedDateObj.go_full)}}</text>
								<text v-if="!choosedDateObj.go　&&　nowDate != today">{{getWeekByDate(todayDate)}}</text>
							</view>
							<view class="date_back date" v-if="curTravelModel.alias === 'toAndFor'"
								@click="handleChooseDate('back',choosedDateObj.back_full)">
								<view class="sts">返</view>
								<text style="margin-right: 10rpx;">{{choosedDateObj.back || backDay}}</text>
								<text
									v-if="(!choosedDateObj.back && nowDate == backDay)|| nowDate===choosedDateObj.back">今天</text>
								<text
									v-if="choosedDateObj.back　&&　nowDate != backDay">{{getWeekByDate(choosedDateObj.back_full)}}</text>
								<text
									v-if="!choosedDateObj.back　&&　nowDate != backDay">{{getWeekByDate(backDayDate)}}</text>
							</view>
						</view>

						<view class="level_align flex_around">
							<view class="btn-wrap tp-bbox"
								style="background: #fff;border: 2rpx solid #00B4FF;color: #00B4FF;"
								@click="resetAdderss">重置</view>
							<view class="btn-wrap" @click="handleGoTravelBusList">搜索</view>
						</view>
						<!-- <view class="btn-wrap" @click="handleGoTravelBusList">搜索</view> -->

						<view class="search_history_list" v-if="searchHistoryList.length">
							<view class="search_history_item" v-for="(h_item, h_index) in searchHistoryList"
								:key="h_index" @click="clickLine(h_item)">
								{{h_item.title}}
							</view>
							<view class="clear-btn" @click="handleClearHistory">清除历史</view>
						</view>
					</view>

					<view class="card_nav-wrap tp-w690">
						<view class="l-wrap" @click="pageJumps('/pagesSecond/make/makeHome')">
							<image :src="www + 'imgs/home/dzly.png'" mode="aspectFill"></image>
						</view>
						<view class="r-wrap">
							<view class="img" @click="pageJumps('/pagesSecond/scenic/scenicHome')">
								<image :src="www + 'imgs/home/jq.png'" mode="aspectFill"></image>
							</view>
							<view class="img" @click="pageJumps('/pagesSecond/hotel/hotelHome')">
								<image :src="www + 'imgs/home/jd.png'" mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view class="tp-w690 tp-mt20" style="height: 200rpx;"
						@click="pageJumps('/pagesSecond/travel/travelHome')">
						<image class="tp-br12" :src="www + 'imgs/home/ly.png'" mode="aspectFill"></image>
					</view>

					<view class="card_nav_min-wrap tp-w690">
						<view class="img_min" @click="handleGoCouponList">
							<image src="../../static/imgs/home/yhq.png" mode="aspectFill"></image>
						</view>
						<view class="img_min" @click="handleGoSecurityCenter">
							<image src="../../static/imgs/home/aqzx.png" mode="aspectFill"></image>
						</view>
						<view class="img_min" @click="goToFWb(1,'新手指引')">
							<image src="../../static/imgs/home/xsyd.png" mode="aspectFill"></image>
						</view>
					</view>

					<!-- 推荐套餐 S -->
					<view class="recommend_package-wrap" v-if="travelTuijian.travel0">
						<view class="common_tit-wrap tp-w690" @click="pageJumps('/pagesSecond/travel/travelHome')">
							<view class="l-wrap">旅游推荐</view>
							<view class="r-wrap">
								<text>查看更多</text>
								<image class="icon" src="../../static/imgs/icons/more-icon.png" mode="aspectFill">
								</image>
							</view>
						</view>
						<view class="recommend_package-content tp-w690">
							<view class="img-bg">
								<image :src="www + 'imgs/home/package-bg.png'" mode="aspectFill"></image>
							</view>
							<view class="package_l-wrap" v-if="travelTuijian.travel0"
								@click="pageJumps('/pagesSecond/travel/travelDetail?id=' + travelTuijian.travel0.id)">
								<image class="img" :src="wwwImgUrl + travelTuijian.travel0.travelCover"
									mode="aspectFill"></image>
								<view class="text-wrap">
									<text class="name ellispsis2">{{travelTuijian.travel0.travelName}}</text>
									<view class="desc">
										<view class="price">￥ <text
												style="font-size: 34rpx;font-weight: bold;">{{travelTuijian.travel0.currentPrice}}</text>起
										</view>
										<text class="score">{{travelTuijian.travel0.travelScore}}分</text>
									</view>
								</view>
								<view class="common_dack-wrap" style="background-color: #FFAF3C;">
									{{travelTuijian.travel0.lables}}
								</view>
							</view>
							<view class="package_r-wrap tp-pr">
								<view class="li" v-if="travelTuijian.travel1"
									@click="pageJumps('/pagesSecond/travel/travelDetail?id=' + travelTuijian.travel1.id)">
									<view class="img">
										<image :src="wwwImgUrl + travelTuijian.travel1.travelCover" mode="aspectFill">
										</image>
									</view>
									<view class="txt ellispsis1">{{travelTuijian.travel1.travelName}}</view>
									<view class="common_dack-wrap" style="background-color: #00B4FF;">
										{{travelTuijian.travel1.lables}}
									</view>
								</view>
								<view class="li" v-if="travelTuijian.travel2"
									@click="pageJumps('/pagesSecond/travel/travelDetail?id=' + travelTuijian.travel2.id)">
									<view class="img">
										<image :src="wwwImgUrl + travelTuijian.travel2.travelCover" mode="widthFix">
										</image>
									</view>
									<view class="txt ellispsis1">{{travelTuijian.travel2.travelName}}</view>
									<view class="common_dack-wrap" style="background-color: #12DCB8;">
										{{travelTuijian.travel2.lables}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 推荐套餐 E -->

					<!-- 目的地推荐 S -->
					<view class="recommend_area-wrap" v-if="false">
						<view class="common_tit-wrap tp-w690"
							@click="pageJumps('/pagesSecond/destination/destinationList')">
							<view class="l-wrap">目的地推荐</view>
							<view class="r-wrap">
								<text>查看更多</text>
								<image class="icon" src="../../static/imgs/icons/more-icon.png" mode="aspectFill">
								</image>
							</view>
						</view>
						<view class="area_swiper-wrap">
							<swiper :duration="1000" :display-multiple-items="3" :next-margin="'90rpx'">
								<swiper-item class="swiper-item"
									@click="pageJumps('/pagesSecond/destination/destinationDetail')"
									v-for="(it_area,in_area) in areaSwiperList" :key="in_area">
									<view class="swiper-item-img">
										<image :src="it_area.img" mode="aspectFill"></image>
										<text class="area_name">{{it_area.city}}</text>
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
					<!-- 目的地推荐 E -->
				</view>
			</view>

			<view class="product_sticky-wrap" v-if="isCheck">
				<!-- 景区 酒店粘性布局 -->
				<view class="product_header-list" :style="{top: (statusBarHeight+44+44)+'px'}">
					<view class="product_header-item flex-1 center_combo"
						:class="{active: curProductHeaderinfo.alias === it_p.alias}"
						v-for="(it_p, in_p) in productHeaderList" :key="in_p" @click="handleChooseProductHeader(it_p)">
						{{it_p.name}}
					</view>
				</view>
				<!-- 旅游 S -->
				<view v-if="curProductHeaderinfo.alias == 'travelGroupList'"
					class=" tp-ptb0lr30  level_align flex_between flex_wrap">
					<view class="tp-br12 tp-bs14 tp-bgf tp-mb20" style="width: 335rpx;"
						@click="pageJumps('/pagesSecond/travel/travelDetail?id=' + item.id + '&title=' + item.travelName)"
						v-for="(item,index) in list" :key="index">
						<view class="tp-pr">
							<image class="travel-img" :src="wwwImgUrl + item.travelCover" mode="aspectFill"></image>
							<text class="img-lable tp-fcF">{{item.travelTypes.length && item.travelTypes[0]}}</text>
						</view>
						<view class="flex flex_column tp-ptb0lr20 tp-pb20">
							<view class="ellispsis2 tp-lh40 tp-fc333 tp-fz28 tp-fw600 tp-h80">
								{{item.travelName}}
							</view>
							<view class="tp-mt10 level_align tp-w100 tp-ofh">
								<view class="quan-tag tp-wsn tp-lh40 tp-mr10 tp-fc tp-bgf tp-br8 tp-border1 tp-fz22"
									v-for="(it,ind) in item.travelLabels" :key="ind">
									{{it}}
								</view>
							</view>
							<view class="level_align flex_between tp-mt10">
								<view class="tp-fz24 tp-fc999">
									{{item.sales}}人已买
								</view>
								<text class="tp-yellow">{{item.travelScore}}分</text>
							</view>
							<view class="tp-fz24 tp-red tp-fw600 tp-mt20">
								￥<text class="tp-fz36">{{item.currentPrice}}</text>起
							</view>
						</view>

					</view>
				</view>
				<!-- 旅游 E -->
				<!-- 酒店 S -->
				<view v-if="curProductHeaderinfo.alias == 'hotelIndex'" class="tp-ptb0lr30  level_align tp-bgf tp-mt20"
					@click="pageJumps('/pagesSecond/hotel/hotelDetail?id=' + item.hotelId)" v-for="(item,index) in list"
					:key="index">
					<image class="hotel-img tp-br12 tp-mr20" :src="wwwImgUrl + item.hotelCover" mode="aspectFill">
					</image>
					<view class="flex flex_column flex-1" style="height: 208rpx;">
						<view class="tp-fz28 tp-fc333 ellispsis1">
							{{item.hotelName}}
						</view>
						<view class="level_align flex_between tp-mt20">
							<text class="tp-yellow">{{item.hotelLevel}} | {{item.hotelScore}}分</text>
							<text class="tp-fc999" v-if="item.distance">距您{{item.distance}}km</text>
						</view>
						<view class="level_align tp-mt20">
							<image class="tp-img28 tp-mr15" src="../../static/imgs/icons/address.png" mode=""></image>
							<text class="ellispsis1 flex-1">{{item.hotelLocation}}</text>
						</view>
						<view class="level_align flex_between tp-mt20">
							<text class="ellispsis1 tp-fc tp-mr20"><text v-for="(ite,ind) in item.salePoints"
									:key="ind">{{'#' +ite}} </text></text>
							<view class="tp-fz24 tp-red tp-fw600">
								￥<text class="tp-fz36">{{item.hotelPrice}}</text>起
							</view>
						</view>
					</view>
				</view>
				<!-- 酒店 E -->
				<!-- 购物 S -->
				<view v-if="curProductHeaderinfo.alias == 'getHomeCarouselRecommend'"
					class=" tp-ptb0lr30  level_align flex_between flex_wrap">
					<view class="tp-br12 tp-bs14 tp-bgf tp-mb20" style="width: 335rpx;"
						@click="pageJumps('/pagesShop/details/details?cid=' + item.id)" v-for="(item,index) in list"
						:key="index">
						<view class="tp-pr">
							<image class="shop-img" :src="wwwImgUrl + item.pic" mode="aspectFill"></image>
						</view>
						<view class="flex flex_column tp-ptb0lr20 tp-pb20">
							<view class="ellispsis1 tp-lh44 tp-fc333 tp-fz28 tp-fw600">
								{{item.name}}
							</view>
							<view class="level_align flex_between tp-mt10">
								<view class="flex align_baseline">
									<view class="tp-fz24 tp-red tp-mr10">
										￥<text class="tp-fz36">{{item.price}}</text>
									</view>
									<!-- <view class="tp-fz24 tp-fc999 tp-tdlt">
										￥{{item.discountPrice}}
									</view> -->
								</view>
								<view class="tp-fz24 tp-fc999">
									销量 {{item.sale}}
								</view>
							</view>

						</view>

					</view>
				</view>
				<!-- 购物 E -->
				<!-- 攻略 S -->
				<view v-if="curProductHeaderinfo.alias == 'strategyIndex'"
					class="tp-ptb0lr30  level_align tp-bgf tp-mt20" v-for="(item,index) in list" :key="index"
					@click="seemessage(item)">
					<image class="raiders-img tp-br12 tp-mr20" :src="wwwImgUrl + item.cover" mode="aspectFill"></image>
					<view class="flex flex_column flex_between flex-1" style="height: 160rpx;">
						<view class="level_align tp-fc333">
							<image class="tp-img64 tp-br50 tp-mr20" :src="item.customerAvater" mode=""></image>
							<view class="flex flex-1 flex_column">
								<view class="tp-fz24 ellispsis1">
									{{item.customerName}}
								</view>
								<view class="tp-fc999 tp-fz22">
									{{item.createTime}}
								</view>
							</view>
						</view>
						<view class="tp-fz28 ellispsis1">
							{{item.articleName}}
						</view>
						<view class="level_align flex_between">
							<view class="ellispsis1 flex-1 tp-mr20 tp-fc">
								<text v-for="items in item.label" :key="items.id">{{'#' + items}}</text>
							</view>
							<view class="level_align">
								<image class="tp-img28 tp-mr15" src="../../static/imgs/icons/see.png" mode=""></image>
								{{item.readNum}}
							</view>
						</view>
					</view>
				</view>
				<!-- 攻略 E -->
				<!-- 景区 S -->
				<view v-if="curProductHeaderinfo.alias == 'scenicIndex'" class="tp-ptb0lr30  level_align tp-bgf tp-mt20"
					@click="pageJumps('/pagesSecond/scenic/scenicDetail?id=' + item.jqId)" v-for="(item,index) in list"
					:key="index">
					<view class="tp-pr">
						<image class="scenic-img tp-br12 tp-mr20" :src="wwwImgUrl + item.jqCover" mode="aspectFill">
						</image>
						<text
							class="img-lable tp-fcF">{{ item.jqSeasons && item.jqSeasons.length && item.jqSeasons.join('、')}}</text>
					</view>
					<view class="flex flex_column flex_between flex-1" style="height: 180rpx;">
						<view class="ellispsis1 tp-fc333 tp-fz28 tp-fw600">
							{{item.jqName}}
						</view>
						<view class="tp-fc666 tp-fz26 ellispsis1">
							{{item.jqIntro}}
						</view>
						<view class="level_align flex_between">
							<view class="ellispsis1  tp-mr20 tp-fc">
								{{item.sales}}人已买 | 距您{{item.distance}}km
							</view>
							<view class="tp-mt10 flex-1 flex_end level_align  tp-ofh">
								<view class="quan-tag tp-wsn tp-lh40 tp-ml10 tp-fc tp-bgf tp-br8 tp-border1 tp-fz22"
									v-for="(it,ind) in item.jqLabels" :key="ind">
									{{it}}
								</view>
							</view>
						</view>
						<view class="level_align flex_between ">
							<view class="flex align_baseline">
								<view class="tp-fz24 tp-red tp-mr20">
									￥<text class="tp-fz36">{{item.currentPrice}}</text>起
								</view>
								<text class="tp-fz24 tp-fc999 tp-tdlt">
									￥{{item.originalPrice}}
								</text>
							</view>
							<view class="tp-fz24 tp-yellow">
								{{item.jqScore}}分
							</view>
						</view>
					</view>
				</view>
				<!-- 景区 E -->
				<!-- 加载更多 S-->
				<view　class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
				<!-- <uni-load-more :status="loadMoreStatus" :contentText="loadMoreContentText" @clickLoadMore="handleLoadMore"></uni-load-more> -->
				<!-- 加载更多 E-->
			</view>
			<view class="" style="height: 150rpx;" v-if="!isCheck"></view>
			<view class="tp-h98"></view>
		</div>
		<view class="hover_btn" @click="handleGoEmergencyContact">
			<image src="../../static/imgs/icons/emergency-icon.png" mode=""></image>
		</view>

		<CommonAuthorize ref="authorize" @confirm="handleGoAuthorize"></CommonAuthorize>

		<HomeTicket @confirm="handleReceiveCoupon(homeCouponInfo.id)" ref="homtTicket"
			:url="homeCouponInfo && homeCouponInfo.img"></HomeTicket>
	</view>
</template>

<script>
	import utils from '../../utils/utils.js'
	import calendar from '../../components/tp-calendar/util.js'
	import HomeNavBar from '../../components/home/home-navbar.vue'
	import HomeSearch from '../../components/home/home-search.vue'
	import HomeSwiper from '../../components/home/home-swiper.vue'
	import HomeNotice from '../../components/home/home-notice.vue'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import CommonAuthorize from '@/components/common/common-authorize.vue'
	import HomeTicket from '@/components/home/home-ticket.vue'
	var QQMapWX = require('@/utils/qqmap-wx-jssdk/qqmap-wx-jssdk.min.js');
	var qqmapsdk;

	export default {
		components: {
			HomeNavBar,
			HomeSearch,
			HomeSwiper,
			HomeNotice,
			uniLoadMore,
			CommonAuthorize,
			HomeTicket
		},
		data() {
			return {
				loadMoreContentText: {
					contentdown: '查看更多',
					contentrefresh: '正在加载...',
					contentnomore: '已没有更多数据'
				},
				loadMoreStatus: 'more',
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				bannerList: [], // 轮播图列表

				trafficList: [{
						name: '机场专线',
						alias: 'bus'
					},
					// {
					// 	name: '拼车',
					// 	alias: 'carpool'
					// }, {
					// 	name: '包车',
					// 	alias: 'Chartered'
					// },
					// {
					// 	name: '租车',
					// 	alias: 'rent'
					// }
				],

				travelModelList: [{
					name: '单程',
					alias: 'oneWay'
				}, {
					name: '往返',
					alias: 'toAndFor'
				}],

				curTrafficinfo: {
					name: '机场大巴',
					alias: 'bus'
				},

				curTravelModel: {
					name: '单程',
					alias: 'oneWay'
				},

				travelDetail: {},

				searchHistoryList: [], // 线路历史

				choosedDateObj: {}, // 选择出行时间

				areaSwiperList: [{
					img: 'https://imgs.2855855.com/imgs/snap/mdd2.png',
					name: '马尔代夫'
				}, {
					img: 'https://imgs.2855855.com/imgs/snap/mdd2.png',
					name: '土耳其'
				}, {
					img: 'https://imgs.2855855.com/imgs/snap/mdd2.png',
					name: '撒哈拉'
				}, {
					img: 'https://imgs.2855855.com/imgs/snap/mdd2.png',
					name: '日本富士'
				}], // 目的地推荐swiper

				productHeaderList: [{
					name: '旅游',
					alias: 'travelGroupList'
				}, {
					name: '酒店',
					alias: 'hotelIndex'
				}, {
					name: '购物',
					alias: 'getHomeCarouselRecommend'
				}, {
					name: '攻略',
					alias: 'strategyIndex'
				}, {
					name: '景区',
					alias: 'scenicIndex'
				}],

				curProductHeaderinfo: {
					name: '旅游',
					alias: 'travelGroupList'
				},

				productContentList: 4,

				homeCouponInfo: {}, // 首页优惠券信息
				delayDay: 0, // 默认可以选择几天后的日期
				durationDay: 100800, //小时 可以选择多少天内的 60天

				nowDate: '', // 今天的日期
				todayDate: '', //today 时间格式的日期
				backDayDate: '', //backDay 时间格式的日期

				noticeList: [], // 公告列表
				scrollTime: 3000, //滚动间隔
				isCheck: false, // 版本
				inviteCode: '', // 上级的邀请码
				nowCity: '', // 当前选择的城市

				list: [], // 页面列表
				pageNum: 1, // 当前页码,请设置初始值
				pageSize: 10, // 每页显示数量,请设置初始值
				last_page: null, // 总页数
				loadMoreText: "加载中...",
				showLoadMore: false, // 加载更多

				addressName: '',
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
				}],
				travelTuijian: {}, // 首页旅游推荐
				trline: [], //路线
				trlineindex: 0, //路线index
				trlineid: 0, //路线id
				title:'',//分享标题
				imageUrl:'',//分享图片
			};
		},
		onLoad(opt) {
			this.$store.commit('delHomeChoosedDateObj')
			this.$store.commit('delHomeChoosedAddressObj')

			// this.getDelayDays()
			this.getNewDate() // 获取今天的日期

			const scene = opt.scene
			if (scene) {
				this.$store.commit('upInviteCode', scene)
				this.inviteCode = scene
			}
			if (opt.inviteCode) {
				this.$store.commit('upInviteCode', opt.inviteCode)
				this.inviteCode = opt.inviteCode
			}
			this.initMap()
			this.handleAuthorize()
			// this.getLocation()

			this.getline()
			//this.getInfo()
		},
		onShow() {
			this.getHomeList()
			this.updateChoosedDate();
			this.updateChoosedAddress();
			this.getHomeBanner()
			this.getAnnouncementList()
			this.getBanBen()
			this.getHomeDestination()
			this.getHomeTuijianList()
			
			if (this.$store.getters.getToken) {
				this.saveSearchHistory()
				this.getHomeCoupon()
				this.getInfo()
				// this.setlinkParent()
			}
			// if (this.$store.getters.getToken && this.$store.getters.getIsCouponTan) {
			// 	this.getHomeCoupon()
			// }
			if (this.$store.getters.getChangeNowCity != this.nowCity) {
				this.nowCity = this.$store.getters.getChangeNowCity
				this.addressName = this.nowCity
			}
			this.pageNum = 1
			// console.log('utils', utils.getWeekByDate('2020-8-7'));
			this.gettrlinid()
		},
		onShareAppMessage() {
			return {
				title: this.title,
				imageUrl:this.imageUrl,
				path: '/pages/tabbar/home?inviteCode=' + this.inviteCode,
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.pageNum = 1
			this.list = []
			this.loadMoreText = "加载中..."
			this.updateChoosedDate();
			this.updateChoosedAddress();
			this.getHomeBanner()
			if (this.$store.getters.getToken) {
				this.saveSearchHistory()
			}
			this.getAnnouncementList()
			this.getHomeList()
			this.getHomeDestination()
		},
		// 上拉触底
		onReachBottom() {
			this.showLoadMore = true;
			if (this.pageNum < this.last_page) {
				this.loadMoreText = "加载中..."
				this.pageNum++
				this.getHomeList();
			} else {
				this.loadMoreText = "已没有更多数据!"
			}
		},

		computed: {
			today() {
				const curDay = calendar.getDateObj() // 当前日期
				const delayDateObj = calendar.getBeforeDate(curDay.full, this.delayDay)
				const arr = delayDateObj.split('-')
				const y = arr[0]
				const m = arr[1].replace(/\b(0)/gi, '')
				const d = arr[2].replace(/\b(0)/gi, '')
				this.todayDate = y + '-' + m + '-' + d
				return m + '月' + d + '日'
			},
			backDay() {
				if (this.$store.getters.getHomeChoosedDateObj.back_obj && this.choosedDateObj.back_obj.month && this
					.choosedDateObj.back_obj.month) {
					let date = this.choosedDateObj.back_obj
					return date.month + '月' + date.day + '日'
				} else {
					this.backDayDate = this.todayDate
					return this.today
				}
			}
		},
		methods: {
			//获取分享数据
			getInfo() {
				this.$http.get(this.$api.inviteIndex).then(res => {
					if (res.code === 200) {
						this.title = res.data.inviteTitle
					}
				})
				this.$http.get(this.$api.miniShareBanner).then(res=>{
					if (res.code === 200) {
						this.imageUrl = res.data.shareList[0].img
					}
				})
			},
			getline() {
				this.$http.get(this.$api.regularTypeList).then(res => {
					if (res.code == 200) {
						this.trline = res.data;
						if(res.data.length){
							this.trlineid = res.data[0].id
							uni.setStorageSync('trlineid',this.trlineid)
						}else{
							this.trlineid = -1
							uni.setStorageSync('trlineid',this.trlineid)
						}
						
					}
				})
				
			},
			gettrlinid(){
				const trlineid = uni.getStorageSync("trlineid");
				if(trlineid){
					this.trlineid = uni.getStorageSync("trlineid");
					uni.setStorageSync('trlineid',this.trlineid)
				}
			},
			sendid(id, index) {
				this.trlineid = id;
				this.trlineindex = index;
				uni.setStorageSync('trlineid',this.trlineid)
			},
			// 获取首页展示列表 
			getHomeList() {
				let param = {}
				if (this.curProductHeaderinfo.alias == 'travelGroupList') {
					param = {

					}
				} else if (this.curProductHeaderinfo.alias == 'strategyIndex') {
					param = {
						articleType: 1, //游记,视频
						// city:this.nowCity,//		城市名
					}
				} else {
					param = {
						city: this.nowCity,
					}
				}
				this.$http.post(this.$api[this.curProductHeaderinfo.alias] + '?pageNum=' + this.pageNum + '&pageSize=' +
					this.pageSize,
					param).then(res => {
					uni.stopPullDownRefresh();
					this.showLoadMore = false;
					if (res.code === 200) {
						this.last_page = res.data.pageTotal
						if (this.curProductHeaderinfo.alias == 'travelGroupList') {
							res.data.result.map(item => {
								let arr = item.travelLabels,
									brr = [];
								if (item.travelLabels && item.travelLabels.length && item.travelLabels
									.length > 2) {
									for (let i = 0; i < 2; i++) {
										brr.push(arr[i])
									}
									item.travelLabels = brr
								}
							})
						}
						if (this.curProductHeaderinfo.alias == 'scenicIndex') {
							res.data.result.map(item => {
								let arr = item.jqLabels,
									brr = [],
									str = '...';
								if (item.jqLabels && item.jqLabels.length && item.jqLabels.length > 2) {
									for (let i = 0; i < 2; i++) {
										brr.push(arr[i])
									}
									brr.push(str)
									item.jqLabels = brr
								}
							})
						}
						if (this.curProductHeaderinfo.alias == 'strategyIndex') {
							res.data.result.map(item => {
								if (!item.customerAvater.startsWith('http')) {
									item.customerAvater = this.$imgUrl + item.customerAvater
								}
							})
						}
						if (this.pageNum > 1) {
							this.list = this.list.concat(res.data.result);
						} else {
							this.list = res.data.result
						}

					}
				})
			},
			//去旅游攻略详情
			seemessage(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pagesSecond/strategy/strategyMessage?id=' + item.id
				})
			},
			// 首页 推荐旅游套餐
			getHomeTuijianList() {
				this.$http.get(this.$api.tuijianList).then(res => {
					if (res.code === 200) {
						if (res.data.length) {
							let length = Math.min(res.data.length, 3);
							for (let i = 0; i < length; i++) {
								// this.travelTuijian["'" + i + "'" ] = res.data[i]
								res.data[i].lables = res.data[i].travelTypes.join('+')
								this.travelTuijian['travel' + i] = res.data[i]
							}
						}

					}
				})
			},
			// 首页 目的地推荐
			getHomeDestination() {
				this.$http.get(this.$api.homeDestination).then(res => {
					if (res.code === 200) {
						this.areaSwiperList = res.data
					}
				})
			},
			// 版本
			getBanBen() {
				this.$http.get(this.$api.isCheck).then(res => {
					if (res.code === 200) {
						if (res.msg == 1) {
							this.isCheck = false
							this.$store.commit('upIsCheck', false)
						} else {
							this.isCheck = true
							this.$store.commit('upIsCheck', true)
						}
					}
				})
			},
			getWeekByDate(date) {
				return utils.getWeekByDate(date)
			},
			// getDelayDays() {
			// 	this.$http.get(this.$api.travelDelayDays).then(res => {
			// 		if (res.code === 200) {
			// 			this.delayDay = res.data.daba
			// 		}
			// 	})
			// },
			// 获取公告
			getAnnouncementList() {
				this.$http.get(this.$api.lvMessageIndex).then(res => {
					if (res.code === 200) {
						this.noticeList = res.data.list
						this.scrollTime = res.data.scrollTime
					}
				})
			},
			// 点击线路历史
			clickLine(item) {
				// console.log(item);
				this.$store.commit('upHomeChoosedAddressObj', {
					['from']: {
						label: item.value[0],
						value: item.value[0],
						id: item.idArr[0],
						"choosed": true
					}
				})
				this.$store.commit('upHomeChoosedAddressObj', {
					['to']: {
						label: item.value[1],
						value: item.value[1],
						id: item.idArr[1],
						"choosed": true
					}
				})
				this.updateChoosedAddress()
				// this.handleGoTravelBusList()
			},
			// 线路历史
			saveSearchHistory() {
				this.$http.get(this.$api.saveSearchHistory + '?type=1').then(res => {
					if (res.code == 200) { // 保存更新历史搜索记录
						res.data.searchList.forEach(item => {
							item.value = item.value.split(',')
							item.title = item.value.join('——')
							item.idArr = item.stationIds.split(',')
						})
						this.searchHistoryList = res.data.searchList
					}
				})
			},
			handleChooseTraffic(item) {
				// this.curTrafficinfo = item;
				if (item.alias !== 'bus') {
					if (item.alias == 'carpool' || item.alias == 'Chartered') {
						this.$http.get(this.$api.trafficOpen).then(res => {
							if (res.code === 200) {
								if (item.alias == 'carpool') {
									if (res.data.pin == 0) {
										uni.navigateTo({
											url: '../others/chooseTransportation?curTrafficinfo=' + JSON
												.stringify(item)
										});
									} else {
										uni.showToast({
											title: '拼车暂无开放',
											icon: 'none'
										})
									}
								}
								if (item.alias == 'Chartered') {
									if (res.data.bao == 0) {
										uni.navigateTo({
											url: '../others/chooseTransportation?curTrafficinfo=' + JSON
												.stringify(item)
										});
									} else {
										uni.showToast({
											title: '包车暂无开放',
											icon: 'none'
										})
									}
								}
								this.$store.commit('upPinNumber', res.data.pinNumber)
							}
						})
					} else {
						uni.navigateTo({
							url: '../others/chooseTransportation?curTrafficinfo=' + JSON.stringify(item)
						});
					}

				}
			},
			handleChooseProductHeader(item) {
				this.curProductHeaderinfo = item;
				this.list = []
				this.pageNum = 1
				this.getHomeList()
			},
			handleChooseTravelModel(item) {
				this.curTravelModel = item;
			},
			// 切换 出发点 目的地
			handleSwitchAddress() {
				let obj = this.$store.getters.getHomeChoosedAddressObj
				let temp = obj.from;
				this.travelDetail.from = obj.to.value;
				this.$store.commit('upHomeChoosedAddressObj', {
					from: obj.to
				})
				this.travelDetail.to = temp.value;
				this.$store.commit('upHomeChoosedAddressObj', {
					to: temp
				})
				this.$forceUpdate()
			},
			// 重置 出发站 和终点站
			resetAdderss() {
				uni.removeStorageSync('homeChoosedAddressObj');
				this.$store.commit('delHomeChoosedAddressObj')
				this.travelDetail = {}
			},
			// 去首页搜索页面
			handleHomeSearch() {
				uni.navigateTo({
					url: '../others/homeSearch'
				})
			},
			// 去选择车站
			handleChooseTravelAddress(status) {
				uni.navigateTo({
					url: '../others/addressList?travelsStatus=' + status + '&trlineid=' + this.trlineid
				})
			},
			handleChooseDate(sts, date) {
				if (!this.choosedDateObj.go_full) {
					date = this.todayDate
				}
				uni.navigateTo({
					url: '../others/calendar?sts=' + sts + '&delayDay=' + this.delayDay + '&durationDay=' + this
						.durationDay +
						'&choosedDay=' + date
				})
			},
			handleLoadMore(e) {
				let sts = e.detail.status
				if (sts === 'more') {
					this.loadMoreStatus = 'loading'
					setTimeout(() => {
						this.loadMoreStatus = 'noMore'
					}, 2000)
				}
			},
			// 去班车列表
			handleGoTravelBusList() {
				let addressObj = this.$store.getters.getHomeChoosedAddressObj
				let fromAddress = addressObj.from && addressObj.from.value
				let toAddress = addressObj.to && addressObj.to.value
				// console.log('fromAddress', fromAddress);
				// console.log('toAddress', toAddress);
				if (!fromAddress) {
					return uni.showToast({
						title: '请选择出发地',
						icon: 'none'
					})
				}
				if (!toAddress) {
					return uni.showToast({
						title: '请选择目的地',
						icon: 'none'
					})
				}
				let choosedDateObj = this.$store.getters.getHomeChoosedDateObj;
				const curDay = calendar.getDateObj() // 当前日期
				// console.log('curDay' + curDay);
				const delayDateObj = calendar.getBeforeDate(curDay.full, this.delayDay)
				let dateObj = calendar.getDateObj(delayDateObj)
				// console.log(' dateObj.month', dateObj.month.replace(/\b(0)/gi, ''));

				const m = dateObj.month.replace(/\b(0)/gi, '')
				const d = dateObj.day.replace(/\b(0)/gi, '')
				if (!choosedDateObj.go_full) { // 如果没有选择日期，
					this.$store.commit('upHomeChoosedDateObj', {
						go: m + '月' + d + '日',
						go_full: dateObj.full,
						go_obj: dateObj
					});
				}
				if (!choosedDateObj.back_full) { // 如果没有选择日期，
					this.$store.commit('upHomeChoosedDateObj', {
						back: m + '月' + d + '日',
						back_full: dateObj.full,
						back_obj: dateObj,
						go: m + '月' + d + '日',
						go_full: dateObj.full,
						go_obj: dateObj
					});
				}

				this.$store.dispatch('getUserAuthorizeStatus').then(res => {
					if (res.code === 200) {
						let {
							assetsStatus
						} = res.data
						if (assetsStatus == 1) { // 需要实名认证
							return this.$refs.authorize.show()
						} else {
							let {
								alias
							} = this.curTravelModel
							if (alias === 'toAndFor') { // 往返
								uni.navigateTo({
									url: '../../pagesTravel/travelBusList.toAndFor?delayDay=' + this
										.delayDay
								});
							} else {
								uni.navigateTo({
									url: '../../pagesTravel/travelBusList?delayDay=' + this.delayDay 
								});
							}
						}
					}
				})
			},
			// 删除所有线路搜索历史
			handleClearHistory() {
				this.$http.get(this.$api.delSearchHistorys + '?type=1').then(res => {
					if (res.code == 200) { // 保存更新历史搜索记录
						this.saveSearchHistory()
					}
				})
			},
			handleGoSecurityCenter() {
				uni.navigateTo({
					url: '../../pagesTravel/securityCenter'
				});
			},
			handleGoCouponList() {
				uni.navigateTo({
					url: '../../pagesTravel/couponList'
				});
			},
			handleGoAuthorize() {
				uni.navigateTo({
					url: '../../pagesUser/realNameAuthentication'
				});
			},
			handleReceiveCoupon(id) { // 领取首页优惠券
				this.$http.get(this.$api.receiveCoupon + '?id=' + id).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '优惠券领取成功'
						});
					}
				})
			},
			updateChoosedDate() {
				this.choosedDateObj = this.$store.getters.getHomeChoosedDateObj;
				let obj = this.$store.getters.getHomeChoosedDateObj;
				this.$set(this.choosedDateObj, 'go', obj.go);
				this.$set(this.choosedDateObj, 'back', obj.back);
			},
			// 检查是否有选择站点
			updateChoosedAddress() {
				let {
					to,
					from
				} = this.$store.getters.getHomeChoosedAddressObj
				this.travelDetail.from = from && from.value
				this.travelDetail.to = to && to.value
				this.$forceUpdate()
			},
			getAddressInfo(address) {
				this.nowCity = address.city
				this.getHomeList()
			},
			// 上下级
			setlinkParent() {
				console.log('登录之后才请求');
				this.$http.get(this.$api.linkParent + '?inviteCode=' + this.inviteCode).then(res => {
					if (res.code === 200) {}
				})
			},
			// 获取首页优惠券信息
			getHomeCoupon() {
				this.$http.get(this.$api.getHomeCoupon).then(res => {
					if (res.code === 200) {
						this.homeCouponInfo = res.data[0]
						if (this.homeCouponInfo && this.homeCouponInfo.id) {
							this.$refs.homtTicket.show()
							// this.$store.commit('upIsCouponTan', false)
						}
					}
				})
			},
			getHomeBanner() {
				this.$http.get(this.$api.getHomeBanner).then(res => {
					uni.stopPullDownRefresh();
					if (res.code === 200) {
						this.bannerList = res.data.banner
					}
				})
			},
			// 获取当前时间
			getNewDate(e) {
				const date = new Date()
				let newDate = ''
				let size = true
				let m = date.getMonth(); //获取当前月份(0-11,0代表1月)
				let d = date.getDate(); //获取当前日(1-31)
				// if (Number(m + 1) < 10) {
				// 	m = '0' + Number(m + 1)
				// }
				// if (Number(d) < 10) {
				// 	d = '0' + d
				// }

				this.nowDate = Number(m + 1) + '月' + d + '日'
			},
			//去富文本页面
			goToFWb(type, name) {
				uni.navigateTo({
					// url: '/pages/others/depositRule?type=' + type + '&name=' + name
					url: '../../pagesTravel/NewbieGuide'
				})
			},
			// 紧急联系人
			handleGoEmergencyContact() {
				uni.navigateTo({
					url: '/pagesTravel/emergencyContactList'
				});
			},
			//去景区首页
			goscenicHome() {
				uni.navigateTo({
					url: '/PagesSecond/scenic/scenicHome'
				});
			},
			// 功能未开放提示
			jingToast() {
				/* uni.navigateTo({
					url:'/PagesSecond/strategy/strategyHome''
				}) */
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
			},
			initMap() {
				qqmapsdk = new QQMapWX({
					key: 'C7JBZ-VQD6D-BVZ4C-PHTJO-HNPSF-ORFT5'
				});
			},
			// 用户授权
			handleAuthorize() {
				const _this = this // 下边this 为undefined
				uni.authorize({
					scope: 'scope.userLocation', // 获取地理信息必填的参数，其它参数见文档
					success(res) {
						_this.getLocation()
					},
					// 授权失败
					fail(err) {
						err = err['errMsg']
						uni.showModal({
								title: '温馨提示',
								content: '为享受去嗨鸭小程序，请进行定位授权!',
								showCancel: false,
								confirmText: '确认授权'
							})
							// 这里只设置了确认按钮，没有取消按钮
							.then(res => {
								//res ： [null, {cancel: false, confirm: true, errMsg: 'showModal: ok'}]
								if (res[1]['confirm']) { // 点击了确认按钮时
									// 调用下边方法时，会弹出 【使用我的地理位置】界面， 未设置直接返回，还是会走fail授权失败的函数，
									// 还是会弹出上边的温馨提示！！！
									// 如果设置, scope.userLocation: true
									uni.openSetting({
										success(res) {
											// 如果不设置，res结果：
											// {errMsg: "openSetting:ok", authSetting: {scope.userLocation: false}}
											// 如果设置, res结果： 
											// {errMsg: "openSetting:ok", authSetting: {scope.userLocation: true}}
											// console.log('小程序设置界面：', res)
										}
									})
								}
							})
					}
				})
			},
			getLocation() {
				console.log("定位中...");
				uni.showLoading({
					title: '获取定位信息中'
				});
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					success: async function(res) {
						uni.hideLoading()
						console.log('定位数据...');
						let {
							latitude,
							longitude
						} = res
						// #ifdef MP-WEIXIN
						_this.reverseGeocoder(latitude, longitude)
						// #endif

						// #ifdef H5
						let data = await _this.exchangeDingwei(latitude, longitude)
						_this.addressName = data.result.ad_info.city
						let addressInfo = data.result.ad_info
						_this.$store.commit('upCurLocation', addressInfo)
						if (_this.nowCity) {
							_this.addressName = _this.nowCity
							_this.$store.commit('upChangeNowCity', _this.addressName)
						} else {
							_this.$store.commit('upChangeNowCity', _this.addressName)
						}
						// #endif
						_this.covers[0].latitude = latitude // 当前位置的纬度
						_this.covers[0].longitude = longitude // 当前位置的经度
						_this.UpCustomerUploadLocation(_this.addressName, latitude, longitude)
					},
					complete() {
						uni.hideLoading()
					}
				});
			},
			reverseGeocoder(latitude, longitude) {
				let _this = this
				qqmapsdk.reverseGeocoder({
					location: {
						latitude,
						longitude
					},
					success: function(res) {
						_this.addressName = res.result.ad_info.city
						let addressInfo = res.result.ad_info
						_this.$store.commit('upCurLocation', addressInfo)

						if (_this.nowCity) {
							_this.addressName = _this.nowCity
							_this.$store.commit('upChangeNowCity', _this.addressName)
						} else {
							_this.$store.commit('upChangeNowCity', _this.addressName)
						}


					},
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tfc-line {
		// display: inline-block;
		width: 690rpx;
		box-sizing: border-box;
		margin: 0 30rpx;
		white-space: nowrap;
		// margsin-right: 100rpx;
		padding: 20rpx 0;

		.tfc-item {
			display: inline-block;
			margin-right: 50rpx;
			// width: 200rpx;
		}
	}

	.home {
		.navbar-wrap {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 100;
			overflow: hidden;

			.img-bg {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				z-index: -1;
			}

			.navbar {
				position: absolute;
				left: 0;
				right: 0;
				height: 88rpx;
				line-height: 88rpx;
				justify-content: space-evenly;
				text-align: center;
				color: #fff;
				font-size: 36rpx;

				.l-wrap {
					position: absolute;
					top: 0;
					left: 0;
					font-size: 30rpx;
					display: flex;

					.location-icon {
						height: 47rpx;
						width: 39rpx;
						margin: 10rpx 15rpx 0 30rpx;
						display: inline-block;
					}
				}
			}
		}

		.search-wrap {
			position: fixed;
			left: 0;
			right: 0;
			z-index: 18;
			height: 76rpx;
			overflow: hidden;

			.img-bg {
				height: 400rpx;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: -1;
			}
		}

		.home-content {
			background-color: #fff;

			.swiper-wrap {
				position: relative;

				.img-bg {
					height: 400rpx;
					position: absolute;
					left: 0;
					right: 0;
					z-index: 0;
				}
			}

			.notice-wrap {
				margin-top: 30rpx;
			}

			.choose_traffic_sticky-wrap {
				.choose_traffic-wrap {

					background-color: #fff;



					.tfc-list {
						position: sticky;
						position: -webkit-sticky;
						display: flex;
						/* #ifdef MP-WEIXIN */
						justify-content: space-evenly;
						padding: 30rpx 0;
						/* #endif */
						/* #ifdef H5 */
						justify-content: space-around;
						padding: 30rpx 50rpx;
						/* #endif */
						margin-bottom: 6rpx;
						position: sticky;
						z-index: 10;
						background-color: #fff;

						.tfc-item {
							font-size: 32rpx;

							&.active {
								color: $blue;
								position: relative;
								font-weight: bold;

								&::before {
									content: '';
									height: 6rpx;
									width: 34rpx;
									border-radius: 3rpx;
									background-color: $blue;
									position: absolute;
									bottom: -14rpx;
									left: 50%;
									transform: translateX(-50%);
								}
							}
						}
					}

					.tfc_detail-wrap {
						position: relative;
						width: 690rpx;
						margin: 0 auto;
						box-shadow: 0px 0px 14rpx 0px rgba(184, 184, 184, 0.29);
						border-radius: 12rpx;
						padding: 0 30rpx 20rpx;
						box-sizing: border-box;

						.travel_model-list {
							font-size: 32rpx;
							font-weight: bold;
							display: flex;
							/* #ifdef MP-WEIXIN */
							justify-content: space-evenly;
							/* #endif */
							/* #ifdef H5 */
							padding: 0rpx 60rpx;
							justify-content: space-around;
							/* #endif */
							height: 100rpx;
							line-height: 100rpx;
							border-bottom: 1px solid #EBEBEB;

							.travel_model-item {
								padding: 0 50rpx;

								&.active {
									color: $blue;
								}
							}

							.reset-btn {
								position: absolute;
								top: 0;
								right: 0;
								width: 70rpx;
								height: 70rpx;

								// background: red;
								.reset-img {
									width: 30rpx;
									height: 30rpx;
								}
							}
						}

						.address-wrap {
							height: 113rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 34rpx;
							font-weight: bold;
							position: relative;
							border-bottom: 1px solid #EBEBEB;

							.address_from {
								width: 40%;
								height: 48rpx;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
								overflow: hidden;
							}

							.address_to {
								width: 40%;
								height: 48rpx;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
								overflow: hidden;
							}

							.icon {
								height: 48rpx;
								width: 48rpx;
								position: absolute;
								left: 50%;
								transform: translateX(-50%);
							}
						}

						.date-wrap {
							.date {
								height: 113rpx;
								display: flex;
								align-items: center;
								font-size: 34rpx;
								font-weight: bold;
								border-bottom: 1px solid #EBEBEB;

								.sts {
									height: 40rpx;
									line-height: 40rpx;
									width: 40rpx;
									text-align: center;
									border-radius: 8rpx;
									font-size: 24rpx;
									margin-right: 30rpx;
								}
							}

							.date_go {
								.sts {
									background-color: #FFF2E0;
									color: #FFAF3C;
								}
							}

							.date_back {
								.sts {
									background-color: #E0F5FF;
									color: #00B4FF;
								}
							}
						}

						.btn-wrap {
							// width: 523rpx;
							width: 260rpx;
							height: 80rpx;
							line-height: 80rpx;
							margin: 50rpx auto 20rpx;
							background: linear-gradient(90deg, rgba(0, 180, 255, 1), rgba(16, 218, 255, 1));
							box-shadow: 0px 0px 14rpx 0px rgba(0, 255, 180, 0.35);
							border-radius: 40rpx;
							text-align: center;
							font-weight: 500;
							font-size: 32rpx;
							color: #fff;
						}

						.search_history_list {
							font-weight: 500;
							display: flex;
							flex-wrap: wrap;

							.search_history_item {
								padding-right: 40rpx;
								padding-bottom: 20rpx;
								color: #666;
							}

							.clear-btn {
								color: #999;
							}
						}
					}

					.card_nav-wrap {
						margin-top: 40rpx;
						display: flex;
						justify-content: space-between;

						.l-wrap {
							width: 324rpx;
							height: 320rpx;
						}

						.r-wrap {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							height: 320rpx;
							width: 346rpx;
							border-radius: 12rpx;

							.img {
								width: 346rpx;
								height: 150rpx;
								border-radius: 12rpx;
							}
						}
					}

					.card_nav_min-wrap {
						margin-top: 30rpx;
						display: flex;
						justify-content: space-between;

						.img_min {
							width: 214rpx;
							height: 120rpx;
							border-radius: 12rpx;
						}
					}

					.recommend_package-wrap {
						.common_tit-wrap {
							margin: 40rpx auto 30rpx;
						}

						.recommend_package-content {
							height: 428rpx;
							width: 690rpx;
							padding: 30rpx;
							box-sizing: border-box;
							border-radius: 12rpx;
							display: flex;
							justify-content: space-between;
							position: relative;
							// background: linear-gradient(58deg, #FD444A, #FD7237);

							.img-bg {
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								z-index: 1;
							}

							.package_l-wrap {
								width: 340rpx;
								height: 100%;
								border-radius: 12rpx;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								position: relative;
								z-index: 2;

								.img {
									height: 230rpx;
								}

								.text-wrap {
									width: 100%;
									flex: 1;
									background-color: #fff;
									display: flex;
									flex-direction: column;
									justify-content: space-between;
									padding: 20rpx 15rpx 30rpx;
									box-sizing: border-box;
									border-radius: 12rpx;
									overflow: hidden;
									position: absolute;
									left: 0;
									bottom: 0;
									z-index: 1;

									.name {
										font-size: 28rpx;
										font-weight: bold;
										margin-bottom: 30rpx;
									}

									.desc {
										display: flex;
										justify-content: space-between;
										align-items: flex-end;

										.price {
											font-size: 24rpx;
											color: #FF4A37;
										}

										.score {
											font-size: 26rpx;
											color: #FFAF3C;
										}
									}
								}
							}

							.package_r-wrap {
								width: 240rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								z-index: 2;

								.li {
									border-radius: 12rpx;
									overflow: hidden;
									position: relative;
									height: 166rpx;

									.img {
										height: 124rpx;
									}

									.txt {
										width: 100%;
										height: 66rpx;
										line-height: 66rpx;
										font-size: 28rpx;
										font-weight: bold;
										border-radius: 12rpx;
										overflow: hidden;
										background-color: #fff;
										padding: 0 22rpx;
										box-sizing: border-box;
										position: absolute;
										left: 0;
										bottom: 0;
										z-index: 1;
									}
								}
							}
						}
					}

					.recommend_area-wrap {
						.common_tit-wrap {
							margin: 40rpx auto 30rpx;
						}

						.area_swiper-wrap {
							height: 172rpx;
							margin-left: 30rpx;

							.swiper-item {
								width: 186rpx;
								height: 172rpx;
								padding-right: 20rpx;
								position: relative;

								.swiper-item-img {
									width: 100%;
									height: 100%;
									border-radius: 12rpx;
									overflow: hidden;
									position: relative;

									.area_name {
										font-size: 26rpx;
										color: #fff;
										position: absolute;
										z-index: 2;
										height: 48rpx;
										line-height: 48rpx;
										text-align: center;
										left: 0;
										right: 0;
										bottom: 0;
										z-index: 3;
										background-color: rgba(#333, 0.5);
									}
								}
							}
						}
					}
				}
			}

			.product_sticky-wrap {
				.product_header-list {
					position: sticky;
					position: -webkit-sticky;
					display: flex;
					justify-content: space-evenly;
					padding: 35rpx 30rpx 40rpx;
					background-color: #fff;
					z-index: 10;

					.product_header-item {
						font-size: 32rpx;
						font-weight: bold;

						&.active {
							color: $blue;
							position: relative;

							&::before {
								content: '';
								height: 6rpx;
								width: 34rpx;
								border-radius: 3rpx;
								background-color: $blue;
								position: absolute;
								bottom: -14rpx;
								left: 50%;
								transform: translateX(-50%);
							}
						}
					}
				}

				.travel-img {
					width: 335rpx;
					height: 200rpx;
					border-radius: 12rpx 12rpx 0px 0px;
				}

				.img-lable {
					position: absolute;
					top: 0;
					left: 0;
					padding: 6rpx;
					background: rgba(0, 0, 0, .3);
					color: rgba(255, 255, 255, .8);
					border-radius: 12rpx 0px 12rpx 0px;
				}

				.quan-tag {
					display: inline-block;
					padding: 0 6rpx;
					border-color: $tc;
				}

				.hotel-img {
					width: 248rpx;
					height: 208rpx;
				}

				.shop-img {
					width: 335rpx;
					height: 335rpx;
					border-radius: 12rpx 12rpx 0px 0px;
				}

				.raiders-img {
					width: 220rpx;
					height: 160rpx;
				}

				.scenic-img {
					width: 240rpx;
					height: 180rpx;
				}
			}
		}
	}

	.activeline {
		color: #00B4FF;
	}
</style>
